<template>
  <div id="aboutus">
    <div class="linebox" @click="gotoGuideDetail(1)">
      <span v-show="lang == 'zh'" class="txt">发布商品</span>
      <span v-show="lang == 'en'" class="txt">Post Trade</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <div class="linebox" @click="gotoGuideDetail(2)">
      <span v-show="lang == 'zh'" class="txt">交易保障</span>
      <span v-show="lang == 'en'" class="txt">Transaction security</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <!-- <div class="linebox"  @click="gotoGuideDetail(3)">
            <span v-show="lang=='zh'" class="txt">防骗指南</span>
            <span v-show="lang=='en'" class="txt">Cheatproof Trick</span>
            <img src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png" alt="转到">
        </div> -->
    <div class="linebox" @click="gotoGuideDetail(4)">
      <span v-show="lang == 'zh'" class="txt">交易纠纷</span>
      <span v-show="lang == 'en'" class="txt">Transaction Disputes</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <div class="linebox" @click="gotoGuideDetail(5)">
      <span v-show="lang == 'zh'" class="txt">投诉举报</span>
      <span v-show="lang == 'en'" class="txt">Complaint reporting</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <div class="linebox" @click="gotoGuideDetail(6)">
      <span v-show="lang == 'zh'" class="txt">收费标准</span>
      <span v-show="lang == 'en'" class="txt">Charging standards</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <div class="linebox" @click="gotoGuideDetail(7)">
      <span v-show="lang == 'zh'" class="txt">联系我们</span>
      <span v-show="lang == 'en'" class="txt">Contact Us</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <div class="linebox" @click="gotoGuideDetail(8)">
      <span v-show="lang == 'zh'" class="txt">法律声明</span>
      <span v-show="lang == 'en'" class="txt">Legal Notice</span>
      <img
        src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png"
        alt="转到"
      />
    </div>
    <!-- <div class="linebox" @click="gotoGuideDetail(9)">
            <span v-show="lang=='zh'" class="txt">网站玩法</span>
            <span v-show="lang=='en'" class="txt">Web sites play</span>
            <img src="http://img.zuimeng.net.cn/my/jiantou_gerenzhongxin@2x.png" alt="转到">
        </div> -->
  </div>
</template>
<script>
export default {
  name: "myGuide",
  //声明组件
  components: {},
  data() {
    return {
      lang: "zh",
      phone: "021-8888888",
    };
  },
  //实例创建完成后被立即调用
  created() {
    //获取语言环境
    this.getLang();
  },
  //监听
  watch: {},
  //计算属性
  computed: {},
  //
  methods: {
    //获取语言环境
    getLang() {
      if (this.$route.query.lang) {
        this.lang = this.$route.query.lang;
      }
    },
    gotoGuideDetail(id) {
      let para = {};
      let title = "";
      if (this.lang == "zh") {
        if (id == 1) {
          title = "发布商品";
        } else if (id == 2) {
          title = "交易保障";
        } else if (id == 3) {
          title = "防骗指南";
        } else if (id == 4) {
          title = "交易纠纷";
        } else if (id == 5) {
          title = "投诉举报";
        } else if (id == 6) {
          title = "收费标准";
        } else if (id == 7) {
          title = "联系我们";
        } else if (id == 8) {
          title = "法律声明";
        } else if (id == 9) {
          title = "网站玩法";
        }
      } else {
        if (id == 1) {
          title = "Post Trade";
        } else if (id == 2) {
          title = "Transaction security";
        } else if (id == 3) {
          title = "Cheatproof Trick";
        } else if (id == 4) {
          title = "Transaction Disputes";
        } else if (id == 5) {
          title = "Complaint reporting";
        } else if (id == 6) {
          title = "Charging standards";
        } else if (id == 7) {
          title = "Contact Us";
        } else if (id == 8) {
          title = "Legal Notice";
        } else if (id == 9) {
          title = "Web sites play";
        }
      }
      para.title = title;
      para.url = "/guideDetails?lang=" + this.lang + "&id=" + id;
      console.log(para);
      this.interaction.hLink(para);
    },
  },
};
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
.linebox{
    width :100%;
    height :1.173333rem;
    line-height :1.173333rem;
    padding : 0 .266667rem;
    background-color :white;
    border-bottom :.026667rem solid #f1f1f1;
    position :relative;
    .txt{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#494949;
        letter-spacing:.005067rem;
        text-align:left;
    }
    .kefu{
        float :right;
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#cb9c57;
        letter-spacing:.005067rem;
        text-align:right;
    }
    img{
        width :.16rem;
        height :.32rem;
        position :absolute;
        top:50%;
        margin-top :-0.16rem;
        right:.266667rem;
    }
}
</style>
